<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/cart.css">
</head>
<body>
    
    <div class="head-note">风险提示：近期有不法分子以商品质量为由，致电客户主动要求退款，套取卡号及密码，诈骗钱财，请您保持警惕，保护好个人信息，谨防诈骗。</div>

<!-- 顶部     -->
<div class="head-top-wrap">
    <div class="head-top"> 

        <div class="top-left">
            <a href="index.html" target="_blank">邮乐首页</a>
        </div>

        <div class="top-right">
            <div class="welcome">您好，欢迎来到邮乐网！</div>
            <div class="login">
                <a href="index.html" class="blue">[请登录]</a>
                <a href="register.html" class="blue">[免费注册]</a>
            </div>

            <div class="myul menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">我的邮乐</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">我的订单</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的收藏</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的消息</a></li>
                </ul>
            </div>

            <div class="ulephone menu dropdown" data-active="menu">
                <span class="ico-phone"></span>
                <a class="txt-down dropdown-toggle" target="_blank">手机邮乐</a>
                <div class="uleapp dropdown-layer dropdown-left">
                    <div class="img-wrap">
                        <img src="images/uleapp.jpeg" alt="手机邮乐">
                    </div>
                </div>
            </div>

            <!-- 全部商品分类 -->
            <div class="category">
                <span class="icon_list"></span>
                <a href="list.html" target="_blank">全部商品分类</a>
            </div>
            <div class="allCategory" id="allCategory" >
                <div class="allCategory_box">
                    <ul class="allCategory_main clear">
                    <li>
                        <h4> 
                            <a>美妆洗护</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>美发护发</a><a>面部护肤</a><a>女性护理</a><a>香水彩妆</a><a>口腔护理</a><a>香水</a><a>身体护理</a><a>洗浴用品</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>女装、饰品、配件</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>帽子</a><a>衬衫</a><a>连衣裙</a><a>针织衫毛衣</a>
                            <a>短外套</a>
                            <a>文胸</a>
                            <a>女袜</a>
                            <a>丝巾/围巾/手套</a>
                            <a>镶嵌饰品</a>
                            <a>金银饰品</a>
                            <a>戒指</a>
                            <a>耳饰</a>
                            <a>项链</a>
                            <a>手镯手链</a>
                            <a>头饰/胸针</a>
                            <a>太阳镜/眼镜框</a>
                            <a>手表</a>
                            <a>女士腰带</a>
                            <a>男士腰带</a>
                            <a>T恤</a>
                            <a>打底衫</a>
                            <a>卫衣</a>
                            <a>小西装</a>
                            <a>风衣/大衣</a>
                            <a>羽绒服</a>
                            <a>牛仔裤</a>
                            <a>休闲裤</a>
                            <a>打底裤/短裤</a>
                            <a>半裙</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>女士内裤</a>
                            <a>吊带/背心</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>家居生活</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>家纺</a>
                            <a>生活日用</a>
                            <a>家纺日用</a>
                            <a>家居用品</a>
                            <a>五金装潢</a>
                            <a>家装建材</a>
                            </p>
                        </li>
                        <li>
                            <h4> 
                                <a>汽车用品</a> 
                                <a class="more">more</a> 
                            </h4>
                            <p>
                                <a>行车记录仪</a>
                                <a>润滑油</a>
                                <a>座垫/座套</a>
                                <a>维修配件</a>
                                <a>内饰</a>
                                <a>脚垫</a>
                                <a>除味</a>
                                <a>美容</a>
                                <a>添加剂</a>
                                <a>4S服务</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>特色美食</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>休闲零食</a>
                            <a>饮料冲调</a>
                            <a>冲调食品</a>
                            <a>厨房调料</a>
                            <a>酒</a>
                            <a>特供礼盒</a>
                            <a>进口食品</a>
                            <a>营养滋补</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>魅力男装</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>衬衫</a>
                            <a>T恤/POLO衫</a>
                            <a>牛仔裤</a>
                            <a>夹克/外套</a>
                            <a>男士内裤</a>
                            <a>休闲裤</a>
                            <a>西装</a>
                            <a>棉服</a>
                            <a>羽绒服</a>
                            <a>西裤</a>
                            <a>针织衫</a>
                            <a>毛背心</a>
                            <a>卫衣</a>
                            <a>大衣/皮衣</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>男袜</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>厨房清洁</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>清洁剂</a>
                            <a>清洁工具</a>
                            <a>一次性用品</a>
                            <a>锅具水壶</a>
                            <a>精美餐具</a>
                            <a>生活用纸</a>
                            <a>厨具</a>
                            <a>水具酒具</a>
                            <a>浴室用品</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>手机数码</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>手机通讯</a>
                            <a>手机配件</a>
                            <a>摄影摄像</a>
                            <a>数码配件</a>
                            <a>数码影音</a>
                            <a>智能设备</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>进口食品</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>进口乳制品</a>
                            <a>进口饼干糕点</a>
                            <a>进口糖果/巧克力</a>
                            <a>进口果干/蜜饯</a>
                            <a>进口食用油</a>
                            <a>进口冲饮/早餐谷物</a>
                            <a>进口冲饮咖啡/茶</a>
                            <a>进口饮用水/饮料</a>
                            <a>进口休闲零食</a>
                            <a>进口米/面</a>
                            <a>进口调味品</a>
                            <a>进口罐头</a>
                            <a>进口酒类</a>运动户外
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>箱包鞋帽</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>功能箱包</a>
                            <a>时尚女包</a>
                            <a>精品男包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>电脑办公</a> 
                            <a class="more">商务礼品</a> 
                        </h4>
                        <p>
                            <a>电脑整机</a>
                            <a>电脑硬件</a>
                            <a>外设产品</a>
                            <a>网络设备</a>
                            <a>游戏设备</a>
                            <a>办公设备</a>
                            <a>文具/耗材</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>家用电器</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>个人护理电器</a>
                            <a>厨房电器</a>
                            <a>生活电器</a>
                            <a>大家电</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>保健品</a>  
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>增强免疫力/抗疲劳</a>
                            <a>减肥瘦身</a>
                            <a>调节血压/血脂/血糖 </a>
                            <a>养生参茸食材 </a>
                            <a>美容养颜 </a>
                            <a>男/女性调养 </a>
                            <a>儿童营养 </a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>运动户外</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>母婴玩具</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                                <a>奶粉</a>
                                <a>尿裤湿巾</a>
                                <a>玩具书籍</a>
                                <a>哺喂用品</a>
                                <a>洗护用品</a>
                                <a>宝宝服饰</a>
                                <a>儿童服饰</a>
                                <a>童车童床</a>
                                <a>妈妈用品</a>
                                <a>出行用品</a>
                                <a>图书音像</a>
                        </p>
                    </li>
                </ul>
                <p class="allCategory_side">
                    <a >邮乐农品</a>
                    <a class="s2">手机充值</a>
                    <a>生活缴费</a>
                    <a class="s2">海外馆</a>
                </p>
                </div>
            </div>

            <div class="web-map">
                <a href="" target="_blank">网站地图</a>
            </div>

            <div class="helpcenter menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">帮助中心</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="" target="_blank" class="menu-item">购物指南</a></li>
                    <li><a href="" target="_blank" class="menu-item">支付帮助</a></li>
                    <li><a href="" target="_blank" class="menu-item">配送方式</a></li>
                    <li><a href="" target="_blank" class="menu-item">售后服务</a></li>
                    <li><a href="" target="_blank" class="menu-item">关于邮乐</a></li>
                </ul>
            </div> 

            <div class="telphone">
                <span class="phone">11185</span>
                <p class="phonetips"></p>
            </div>
        </div>
    </div>
</div>

<!-- 头部 -->
<div class="login-header">
    <div class="header">
        <div class="head-logo">
            <a href="" class="logo-ule">邮乐网</a>
        </div>
        <div class="head-cart step0">
            <p class="step_img"></p>
        </div>
    </div>
</div>



<!-- 身体  -->
<div class="wrapper emptycart">
	<div class="mycart">
		<div class="cart-title">
			<h3>购物车</h3>
			<p class="fr">
				<a class="myfavor" href="###">我的收藏夹</a>
			</p>
		</div>
		<!-- <div class="cart-empty">
      		<p>您的购物车暂无商品，立即去挑选商品吧！</p>
      		<span class="btn-shopping btn-cart-login">立即登录</span>
      		<a class="btn-cart-toshopping" href="list.html">去购物&gt;&gt;</a>
        </div> -->
        <div class="cart-head">
			<div class="infoOptions">
				<a class="iItem iItemA disabled">奖金</a>
			</div>
			<ul>
				<li class="item-check"><input type="checkbox" class="chk-all"></li>
				<li class="item-name">商品信息</li>
				<li class="item-price">单价</li>
				<li class="item-count">商品数量</li>
				<li class="item-total">价格合计</li>
				<li class="item-action">操作</li>
			</ul>
        </div>
        
        <div class="cart-main">
			<!-- <div class="cartStore"> -->
                <!-- 内容 -->
                <!-- <div class="store-info">
					<ul>
						<li class="item-check">
							<input type="checkbox" class="chk-store">
						</li>
						<li class="item-name ">
							<a class="storename">聚耀服饰专营店</a>
						</li>
					</ul> 
                </div> -->
                <!-- 商品 -->
                <!-- <div class="store-items">
                    <ul class="item-ul">
						<li class="item-check">
							<input type="checkbox" class="chk-item">
						</li>
						<li class="item-name">
							<div class="prodinfo">
								<a class="prod-img">
									<img src="">
								</a>
								<a class="prod-name">生活元素（LIFE ELEMENT）养生壶1.8L微电脑控制多功能烧水壶养生壶煮茶器D52</a>
							</div>
						</li>
						<li class="item-attr">
						</li>
						<li class="item-price">
							<div class="prodprice">
                                <em>¥99.00</em>
							</div>
						</li>
						<li class="item-count">
							<div class="prodcount">
								<span class="btn-minus disabled"></span>
								<input type="text" name="prdCount" value="1" class="setNum">
								<span class="btn-plus"></span>
                            </div>
						</li>
						<li class="item-total">
							<div class="totalprice">
								¥<em>99.00</em>
							</div>
                        </li>
						<li class="item-action">
							<p><span class="btn-favor">收藏</span></p>
                            <p><span class="btn-delete">删除</span></p>	
                        </li>
					</ul>
                </div>     -->
            <!-- </div> -->
        </div>
        <div class="cart-foot" data-uspm="2013">
            <span class="item-check">
                <input type="checkbox" class="chk-all">全选
            </span>
            <a class="btn-delsel">批量删除</a>
            <a class="btn-clear">清空购物车</a>
            <div class="hy_preferential_price">
                <p>邮特惠会员此单可省¥<span>0.00</span><em>成为会员</em></p>
            </div>
        </div>
    </div>
    
    





	<div class="hotsale">
		<h3>热销商品</h3>
		<ul class="clearfix" data-uspm="2015"></ul>
	</div>
</div>



 





<!-- 底 -->
<div class="mycart-bar">
    <div class="cart-total">
        <dl class="prod-count">
            <dt>商品数量：</dt>
            <dd><strong>0</strong>件</dd>
        </dl>
        <dl class="prod-price">
            <dt>价格合计：</dt>
            <dd><strong>¥<em>0.00</em></strong></dd>
        </dl>
        <dl class="prod-discount">
            <dt>促销抵扣</dt>
            <dd>- <strong>¥<em>0.00</em></strong></dd>
        </dl>
        <dl class="prod-totalprice">
            <dt>商品总价：<br><span>不含运费</span></dt>
            <dd>¥<em class="tol-price">0.00</em></dd>
        </dl>
        <p class="fr">
            <a href="list.html" class="btn-continue">继续购物</a>
            <a data-uspm="order" class="btn-ordernow disabled">去结账</a>
        </p>
    </div>
</div>


<!-- 底部 -->
<div class="footer-wrap">
    <div class="footer">
        <div class="foot-banner">
            <a class="foot-banner-post">中国邮政</a>
            <a class="foot-banner-tom">TOM</a>
            <a class="foot-banner-commitment">品质保障 优选邮乐</a>
            <a class="foot-banner-free">覆盖城乡 安全速达</a>
        </div>

        <div class="foot-helper">
            
        </div>

        <div class="foot-license">
            <ul>
                <li>酒类商品零售许可证：浦市监酒零字 第 JY13101150070309-JL 号</li>
                <li>食品经营许可证：JY13101150070309</li>
                <li>统一社会信用代码：913100006916203638</li>
            </ul>
        </div>
        <div class="foot-copyright">
            <a style="color:#999">沪公网安备 31011502009005号</a>
            <span class="sep">|</span>
            沪ICP备 13037728号
            <span class="sep">|</span>
            (沪)网械平台备字[2020]第00009号
            <span class="sep">|</span>
            Copyright 2009-2020, 版权所有上海邮乐网络技术有限公司 ULE.COM
        </div>
        <div class="foot-iconlink">
            <a><b>中国邮政</b></a> 
            <a><b>TOM</b></a>
            <a><b>可信网站</b></a>
            <a><b>EMS</b></a>
            <a><b>中国邮政储蓄银行</b></a>
            <a><b>不良信息举报中心</b></a> 
            <a><b>上海网警网络110</b></a>
            <a><b>上海工商</b></a>
            <a><b>诚信网站</b></a>
        </div>

    </div>
</div>

<script src="js/jquery.2.2.4.js"></script>
<script src="js/drop-down menu.js"></script>
<script src="js/index.js"></script>
<script src="js/login.js"></script>
<script src="js/ajax2.0.js"></script>
<script src="js/cookie.js"></script>


<script>

    // 初始获取本地存储的数据
    var userData = sessionStorage.getItem("userState");
    userData = userData ? JSON.parse(userData) : userData; 
    
    // 判断本地的数据状态，是否为登录成功，跳转到登录
    if(!( userData && userData.state === 1 )){
        alert("你还没有登录，登录已失效，请重新登录") 
        location.href = "login.html"
    }

    

    // 购物车
    
    class Cart{
        constructor(){
            this.tbody = document.querySelector(".cart-main");
            this.url = "http://localhost:8080/api";

            //请求cookie
            this.getData();

            this.addEvent(); 
        }
        getData(){
            this.data = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")):[];
            // console.log(this.data);
            //请求ajax
            this.load();
        }
        load(){
            ajax({
                url:this.url,
                data: {type: "goods"},
                success:res=>{
                    this.res = JSON.parse(res);
                    this.render();
                }
            })
        }
        render(){
            // console.log(this.data);
            // console.log(this.res);
            let str = "";

            let addsPrice = "";
            let sumPrice = 0;

            // let Number = "";
            let goodsNumber = 0;

            for(let i=0;i<this.data.length;i++){
                for(let j=0;j<this.res.length;j++){
                    if(this.data[i].id === this.res[j].goodsId){
                        // console.log(this.res[j]);

                        addsPrice = Number(this.res[j].d_price * this.data[i].num);
                        sumPrice += addsPrice;

                        goodsNumber += Number(this.data[i].num);
                        str += `
                        <div class="storeCart" data-index="${this.res[i].goodsId}">
                        <div class="store-info">
					<ul>
						<li class="item-check">
							<input type="checkbox" class="chk-store">
						</li>
						<li class="item-name ">
							<a class="storename">${this.res[j].shop_name}</a>
						</li>
					</ul> 
                </div>
                <div class="store-items">
                    <ul class="item-ul">
						<li class="item-check">
							<input type="checkbox" class="chk-item">
						</li>
						<li class="item-name">
							<div class="prodinfo">
								<a class="prod-img">
									<img src="images/goodspic/${this.res[j].url.pho1}">
								</a>
								<a class="prod-name">${this.res[j].name}</a>
							</div>
						</li>
						<li class="item-attr">
						</li>
						<li class="item-price">
							<div class="prodprice">
                                ￥<em>${this.res[j].d_price}</em>
							</div>
						</li>
						<li class="item-count">
							<div class="prodcount">
								<span class="btn-minus" id="minus"></span>
								<input type="text" name="prdCount" value="1" class="goods_num">
								<span class="btn-plus" id="plus"></span>
                            </div>
						</li>
						<li class="item-total">
							<div class="totalprice">
								¥<em>${this.res[j].d_price}</em>
							</div>
                        </li>
						<li class="item-action">
							<p><span class="btn-favor">收藏</span></p>
                            <p><span class="btn-delete">删除</span></p>	
                        </li>
					</ul>
                </div>  </div>`;
                            
                            // console.log(addsPrice);
                            // this.input.value = sum;     
                    }
                }
            }
            // console.log(this.tbody);
            this.tbody.innerHTML = str;
        }
        addEvent(){
            var that = this;
            
            // 事件委托绑定删除按钮的事件
            this.tbody.addEventListener("click",function(eve){
                if(eve.target.className === "btn-delete"){
                    // 2.记录点击商品的唯一id
                    // console.log(eve.target);
                    that.id = eve.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute("data-index");
                    // console.log(that.id);
                    // 3.删除DOM元素
                    eve.target.parentNode.parentNode.parentNode.parentNode.parentNode.remove();
                    // 4.更新cookie数据
                    that.update();
                }
            })

            this.tbody.addEventListener('click', function(eve){
                
                if(eve.target.className == 'btn-plus'){
                    let count = Number($(eve.target).siblings()[1].value);
                    $(eve.target).click(function(){
                        count = count+1;
                        // console.log(cont);
                        //点击加号数量增加
                        $(eve.target).siblings()[1].value = count;
                        //对应计算商品的总价
                        let singlePrice = $(eve.target).parent().parent().siblings(".item-price").find('.prodprice').find('em').text()
                        let toralPrice = (Number(singlePrice) * count).toFixed(2);
                        //获取总价
                        $(eve.target).parent().parent().siblings(".item-total").find('.totalprice').find('em').text(toralPrice);

                        //修改横幅信息
                        var allCount = 0;
                        $.each($('.goods_num'), function(index, obj ){
                            allCount += Number(obj.value);
                        })
                        $('.mycart-bar').find('.prod-count').find('strong').text(allCount);
                        //价格合计
                        var toatalPriceSum = 0;
                        $.each($('.totalprice'), function(index, obj){
                            toatalPriceSum += Number($(obj).find('em').text());
                        });
                        $('.mycart-bar').find('.prod-price').find('strong').find('em').text(toatalPriceSum.toFixed(2));
                        $('.tol-price').text(toatalPriceSum.toFixed(2));
                    })
                }
                if(eve.target.className == 'btn-minus'){
                    $(eve.target).click(function(){
                        let num = Number($(eve.target).siblings()[0].value);
                        if(num >= 1){
                            num = num-1;
                            $(eve.target).siblings()[0].value = num;
                            let singlePrice = $(eve.target).parent().parent().siblings(".item-price").find('.prodprice').find('em').text()
                            let toralPrice = (Number(singlePrice) * count).toFixed(2);
                            //获取总价
                            $(eve.target).parent().parent().siblings(".item-total").find('.totalprice').find('em').text(toralPrice);

                            //修改横幅信息
                            var allCount = 0;
                            $.each($('.goods_num'), function(index, obj ){
                                allCount += Number(obj.value);
                            })
                            $('.mycart-bar').find('.prod-count').find('strong').text    (allCount);
                            //价格合计
                            var toatalPriceSum = 0;

                            if($(".chk-item") == true){ 
                                $.each($('.totalprice'), function(index, obj){
                                toatalPriceSum += Number($(obj).find('em').text());
                                });
                                $('.mycart-bar').find('.prod-price').find('strong').find('em').text(toatalPriceSum.toFixed(2));
                                $('.tol-price').text(toatalPriceSum.toFixed(2));
                            }else{
                                toatalPriceSum = 0;
                            }
                            
                                


                        }else if(num == 0){
                            let count = 0;
                            $(eve.target).siblings()[0].value = count;
                        }   
                    })
                }

            })
            
            // this.add.addEventListener("click",function(eve){
            //     alert(1111);
            //     if(eve.target.className === "setNum"){
            //         // 2.记录修改商品的唯一id
            //         that.id = eve.target.parentNode.parentNode.getAttribute("data-index");

            //         that.num = eve.target.value;

            //         // 3.更新cookie数据
            //         // that.update();
            //     }
            // })

        }
        update(){
            let i=0;
            this.data.some((value,index)=>{
                i = index;
                return value.id === this.id;
            })
            this.data.splice(i,1);
            setCookie("goodsMsg",JSON.stringify(this.data));
        }
    }
    new Cart();

    // - 对象转JSON：要转换的数据必须得符合对象的要求
    //         - `JSON.stringify(obj)`
    // - JSON转对象：要转换的数据必须得符合JSON的要求
    //         - `JSON.parse(str)`



    // 购物车
    // - 除了已完成功能之外
    // - 更换本地存储技术，重新实现
    // - 总价，合计，总数量，选中，全部选中，删除选中
    



</script>

</body>
</html>